<template>
	<view class="filter_box flex align-center justify-between pad0-40 box-sizing">
		<view class="fileter_item flex align-center font26 color66" v-for="(item,index) in optionlist" :key="index"
			@click="changFilter(index)">
			<span>{{item.name}}</span>
			<span :class="filterIndex==index?'colorf1':''">{{item.name}}</span>
			<image v-show="filterIndex!=index" src="@/static/jing-orderby/filter_tri.png"
				mode=""></image>
			<image v-show="filterIndex==index" :class="filterIndex==index&&item.isAsc?'rotateImg':''" src="@/static/jing-orderby/filter_tri_act.png"
				mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderby",
		props: {
			optionlist: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				list: [],
				filterIndex: 0
			};
		},
		created() {
			console.log(this.optionlist)
		},
		methods: {
			changFilter(index) {
				if (this.filterIndex == index) {
					this.list[index].isAsc = !this.list[index].isAsc
				} else {
					this.filterIndex = index
				}
				this.$forceUpdate()
				this.$emit('change', this.list[this.filterIndex])
				// console.log(this.list);
			},
		}
	}
</script>

<style lang="scss">
	@import './jing-orderby.scss';
</style>
